<template>
    <div id="content">
      <el-container>
        <el-main>
          <el-card shadow="always" header="注册">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
            >
              <el-form-item label="用户名" prop="userName">
                <el-input
                  v-model="ruleForm.userName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.pass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="pass">
                <el-input
                  type="password"
                  v-model="ruleForm.checkPass"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >注册</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script>
  import store from '../store';
  
  export default {
    name: "Register",
    data() {
        var validateName = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入用户名"));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      };
      var validateCheckPass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请确认密码"));
        } else if(value != ruleForm.pass) {
            callback(new Error("密码不一致"));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          userName: '',
          pass: "",
          checkPass: ''
        },
        rules: {
          name: [{ validator: validateName, trigger: "blur" }],
          pass: [{ validator: validatePass, trigger: "blur" }],
          checkPass: [{ validator: validateCheckPass, trigger: "blur" }],
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$apiFun.postRegister({
              name: this.ruleForm.userName,
              password: this.ruleForm.pass
            }).then(response => {
              if(response['success']) {
                alert(response.msg)
                this.$router.push('/')
              } else {
                alert(response['msg'])
              }
            }).catch(err => {
              console.log(err)
            })
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
  };
  </script>
  
  <style>
  .grid-content {
    min-height: 36px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  #content {
    width: 100%;
    min-height: 100vh;
    background: url("/static/login_bg.webp") center center no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>
  